<template>
  <div>
    <!-- 搜索框 -->
    <TopFilter :list="topFilterList" :cols="4" :labelWidth="'90'" :collapse="true" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>

    <!-- 客户投诉处理情况 -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :isSelectColumn="false"
      columnsRef="khtsKhtsclClqkTable"
      :onColumnsChange="columns => (this.columns = columns)"
    >
      <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-download" :loading="exportLoading" @click="exportData()">导出</el-button>
      </template>
    </FilterTable>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import { getDealerUser } from '@/api/customerRepair/customerComplaint/customerComplaintReception';
import { queryCompaintHandling, exportComplaint } from '@/api/customerRepair/customerComplaint/customerComplaintHandling';
// import { exportExcelFile } from '@/utils/index';
import { exportExcelFile } from '@/utils/index';

export default {
  name: 'CustomerComplaintHandling',
  components: {},
  mixins: [dictionary],
  data() {
    this.BaseTable = null;
    return {
      topFilterList: this.createTopFilterList(),
      fetchApi: queryCompaintHandling, // 获取客户投诉处理情况表格接口
      fetchParams: { xhrAbort: true }, // 获取客户投诉处理情况表格参数
      columns: this.createTableColumns(), // 客户投诉处理情况信息表格列
      exportLoading: false // 导出加载中
    };
  },
  created() {},
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.getEmp();
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'RANGE_DATE',
          label: '投诉日期',
          fieldName: 'complaintDateFrom|complaintDateTo',
          placeholder: '选择日期'
        },
        {
          type: 'RANGE_DATE',
          label: '处理完成日期',
          fieldName: 'complaintEndDateFrom|complaintEndDateTo',
          placeholder: '选择日期'
        },
        {
          type: 'RANGE_DATE',
          label: '结案日期',
          fieldName: 'closeDateFrom|closeDateTo',
          placeholder: '选择日期'
        },
        {
          type: 'SELECT',
          label: '满意程度',
          fieldName: 'complaintResult',
          placeholder: '请选择',
          itemList: this.createDictList('8043')
        },
        {
          type: 'SELECT',
          label: '处理人',
          filterable: true,
          fieldName: 'principal',
          placeholder: '请选择',
          itemList: []
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          fixed: 'left',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '处理人',
          dataIndex: 'PRINCIPAL',
          showOverflowTooltip: true,
          editType: 'select',
          editable: false,
          editItems: []
        },
        {
          title: '投诉个数',
          dataIndex: 'COMPLAINT_COUNT'
        },
        {
          title: '及时处理',
          dataIndex: 'ON_TIME_COUNT',
          sorter: true
        },
        {
          title: '及时处理率',
          dataIndex: 'ON_TIME_RATE',
          sorter: true
        },
        {
          title: '满意数',
          dataIndex: 'CONTENTMENT_COUNT',
          sorter: true
        },
        {
          title: '处理结果满意率',
          dataIndex: 'CONTENTMENT_RATE',
          sorter: true
        },
        {
          title: '重复处理数',
          dataIndex: 'REPEAT_COUNT',
          sorter: true
        },
        {
          title: '重复处理率',
          dataIndex: 'REPEAT_RATE',
          sorter: true
        }
      ];
    },
    // 搜索
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    // 获取全部员工
    async getEmp() {
      const res = await getDealerUser(this.editComplaintId);
      let empList = res.data.map(x => ({ text: x.employeeName, value: x.userId + '' }));
      this.topFilterList.find(item => item.fieldName === 'principal').itemList = empList; // 处理人

      this.columns.find(item => item.dataIndex === 'PRINCIPAL').editItems = empList; // 处理人表格
    },
    // 导出
    exportData() {
      this.exportLoading = true;
      exportComplaint(this.fetchParams).then(res => {
        exportExcelFile(res, '投诉处理情况');
      });
      this.exportLoading = false;
    }
  }
};
</script>
